<template>
  <div id="page-bind">
    <wv-group title="信息绑定">
      <wv-input placeholder="请输入姓名" v-model="user.name"></wv-input>
      <wv-input placeholder="请输入电话" type="number" v-model="user.phoneNumber"></wv-input>
      <!-- <wv-cell title="请选择部门" is-link :value="user.dept" @click.native="deptPickerShow = true" /> -->
      <!-- <wv-button @click="deptPickerShow = true">单列选择器</wv-button> -->
      <wv-input @click.native="deptPickerShow = true" placeholder="请选择部门" v-model="user.dept" disabled></wv-input>
      <!-- <wv-picker v-model="deptPickerShow" :slots="deptSlots" @change="onChange" columns=""></wv-picker> -->
      <wv-picker
        :visible.sync="deptPickerShow"
        :columns="deptSlots"
        value-key="name"
        @confirm="updateDept"
      />
    </wv-group>
    <wv-button type="primary" @click="bind">绑定</wv-button>
  </div>
</template>
<script>

export default {
  data () {
    return {
      user: {},
      deptValue: [],
      deptPickerShow: false,
      deptSlots: [
        {
          values: [
            '部门1',
            '部门2',
            '部门3',
            '部门4',
            '其它'
          ]
        }
      ]
    }
  },

  methods: {
    updateDept (picker, value) {
      this.$nextTick(() => {
        this.user.dept = picker.getValues()[0];
        console.log(this.user);
      })
    },
    bind () {

    }
  }
}
</script>
<style scoped>

</style>


